import React from 'react';
import './Menu.css';

// 更新后的数据结构定义
interface MenuItem {
    name: string;
    icon?: string;
    href?: string;
    children?: MenuItem[];
}

// 完整菜单数据结构
const menuData: MenuItem[] = [
    {
        icon: "/src/assets/img/sp.png",
        name: '广告设计',
        children: [
            { name: '海报设计', href: '#' },
            { name: '展板设计', href: '#' },
            { name: '背景素材', href: '#' },
            { name: '元索素材', href: '#' },
            { name: '节日海报', href: '#' },
            { name: 'LOGO', href: '#' },
            { name: '单页折页', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c2.png",
        name: '视频音频',
        children: [
            { name: 'AE模板', href: '#' },
            { name: '抖音视频', href: '#' },
            { name: '巨幕宽屏', href: '#' },
            { name: '背景视频', href: '#' },
            { name: '实拍视频', href: '#' },
            { name: '影视配乐', href: '#' },
            { name: '广告配乐', href: '#' }
        ]
    },
    // 其他分类按照相同结构补充...
    {
        icon: "/src/assets/img/c3.png",
        name: 'UI新媒体',
        children: [
            { name: '网页页面', href: '#' },
            { name: '手机海报', href: '#' },
            { name: 'H5/启动页', href: '#' },
            { name: '移动app页', href: '#' },
            { name: '公众号首图', href: '#' },
            { name: '公众号小图', href: '#' },
            { name: ' ICON图标', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c4.png",
        name: '办公文档',
        children: [
            { name: '求职简历', href: '#' },
            { name: '人事相关', href: '#' },
            { name: '行政相关', href: '#' },
            { name: '商务汇报', href: '#' },
            { name: '教育培训', href: '#' },
            { name: '手绘小报', href: '#' },
            { name: ' 颁奖典礼', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c5.png",
        name: '电商淘宝',
        children: [
            { name: '详情页', href: '#' },
            { name: '手机端', href: '#' },
            { name: 'C4D海报', href: '#' },
            { name: '首页模板', href: '#' },
            { name: '促销海报', href: '#' },
            { name: '促销标签 ', href: '#' },
            { name: ' 弹窗挂件', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c6.png",
        name: '摄影图',
        children: [
            { name: '自然风景', href: '#' },
            { name: '餐饮美食', href: '#' },
            { name: '建筑空间', href: '#' },
            { name: '人像摄影', href: '#' },
            { name: '生活方式', href: '#' },
            { name: '商务办公', href: '#' },
            { name: ' 医疗健康', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c7.png",
        name: '插画动图',
        children: [
            { name: '情感表达', href: '#' },
            { name: '节日节气', href: '#' },
            { name: '教育文化', href: '#' },
            { name: '动态海报 ', href: '#' },
            { name: '动态插画', href: '#' },
            { name: '科技概念', href: '#' },
            { name: ' 动态二维码', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c8.png",
        name: '装饰装修',
        children: [
            { name: '背景墙', href: '#' },
            { name: '文化墙 ', href: '#' },
            { name: '装饰画', href: '#' },
            { name: '地面装饰', href: '#' },
            { name: '导视标识', href: '#' },
            { name: '家居装饰 ', href: '#' },
            { name: ' 婚礼效果图', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c9.png",
        name: '字体',
        children: [
            { name: '楷体', href: '#' },
            { name: '黑体', href: '#' },
            { name: '宋体', href: '#' },
            { name: '创意字体', href: '#' },
            { name: '拼音字体', href: '#' },
            { name: '手写字体', href: '#' },
            { name: ' 中国风字体', href: '#' }
        ]
    },
    {
        icon: "/src/assets/img/c10.png",
        name: '3D素材',
        children: [
            { name: '3D元素 ', href: '#' },
            { name: '3D海报', href: '#' },
            { name: '3D背景', href: '#' },
            { name: '美陈雕塑', href: '#' },
            { name: '材质贴图', href: '#' },
            { name: '室内景观', href: '#' },
            { name: ' 样机模型', href: '#' }
        ]
    }
];
const SubMenu: React.FC = () => {
    return (
        <div className="design-menu">
            {/* 头部区域 */}
            <div className="header-banner">
                <img src="/src/assets/img/ep.png" alt="" className='headerImg' />
                <span>个人全站VIP仅29元起，站内十大类目均可下载</span>
                <a href="#" className="vip-button">去开通<span></span> </a>
            </div>
            {/* 主菜单区域 */}
            <ul className="main-menu">
                {/* <div> */}
                {menuData.map((category, index) => (
                    <div key={index} className="menu-category">
                        <ul className="submenu">
                            <div className="logo-section">
                                <div className='logo'>
                                    <img src={category.icon} alt="" className="logo-icon" />
                                    <a className="logo-text">{category.name}</a>
                                </div>

                                {category.children?.map((item, subIndex) => (
                                    <li key={subIndex} className="submenu-item">
                                        <a href={item.href} className="menu-link">
                                            {item.name}
                                        </a>
                                    </li>
                                ))}
                            </div>
                        </ul>
                    </div>
                ))}
            </ul>
            {/* </div> */}
        </div>
    );
};

export default SubMenu;